<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- web路径问题
		不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
		以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:8888)；需要加上项目名
			http://localhost:8888/crud
	
	 -->
	<title>用户列表页面</title>
	<%
		pageContext.setAttribute("ctp",request.getContextPath());
	%>
	<link rel="stylesheet" href="${ctp}/support/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script src="${ctp}/support/jquery.js"></script>
	<script type="text/javascript" src="${ctp}/support/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<style>
		.width1{
			width:30px;
		}
		.width_full{
			width:100%;
		}
		.a_hover{
			cursor: pointer;
		}
		.search_margin{
			margin-top: 19px;
		}
		.h_margin_top{
		    margin-top: -3px;	
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="../basic/top.jsp"%>
		</div>
		<!-- 表格行 -->
		<div class="row">
			<!-- 按钮行 -->
			<div class="row">
				<div class="col-md-2 col-md-offset-2">
					<h1 class="h_margin_top">SSM-CRUD</h1>
				</div>
				<div class="col-md-offset-6 col-md-2">
					<input class="btn btn-primary" type="button" value="新增" id="addBtn">
					<input class="btn btn-danger" type="button" value="删除" id="delBtn">
				</div>
			</div>
			<div class="row">
				<div class="col-md-9 col-md-offset-2">
					<div class="comtainer_table">
						<table	class="table table-hover">
							<thead>
								<tr>
									<th class="width1"><input type="checkbox" class="total_check"></th>
									<th>序号</th>
									<th>姓名</th>
									<th>公司</th>
									<th>部门</th>
									<th>是否停用</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${page.list }" var="item" varStatus="status">
									<tr>	
										<th class="width1"><input type="checkbox" ref="${item.userId}" class="row_check" ></th>
										<td>${status.index+1}</td>
										<td>${item.userName }</td>
										<td>${item.sysCorpVO.corpName }</td>
										<td>${item.sysDeptVO.deptName }</td>
										<td><c:if test="${item.isDel==0 }">是</c:if><c:if test="${item.isDel!=0 }">否</c:if></td>
										<th>
											<button class="btn btn-primary btn-sm" id="edit_single">
												<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
												编辑
											</button>
											<button class="btn btn-danger btn-sm" id="del_single">
												<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
												删除
											</button>
										</th>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 分页信息行 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-2">
				当前记录数：xxx
			</div>
			<div class="col-md-5">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li ><a href="#">首页</a></li>
						<li>
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li ><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					        <a href="#" aria-label="Next">
					           <span aria-hidden="true">&raquo;</span>
					        </a>
					    </li>
					    <li ><a href="#">末页</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</body>
<script>
	$(".pagination").find("li").each(function(){
		$(this).on('click',function(){
			var $act = $("li.active");
			if($act){
				$act.removeClass("active")
			}
			$(this).addClass("active");
		})
	})
	//全选/全不选
	$(".total_check").on('click',function(){
		var ischecked=$(this).prop("checked");
		if(ischecked){
			$(".row_check").each(function(){
				$(this).prop("checked",true);
			})
		}else{
			$(".row_check").each(function(){
				$(this).prop("checked",false);
			})
		}
	})
	//删除数据
	$("#delBtn").on('click',function(){
		var ids='';
		$(".row_check:checked").each(function(){
			var id=$(this).attr("ref");
			if($.trim(ids)==''){
				ids+=id;
			}else{
				ids+=','+id;
			}
		})
		if(ids=='' || ids.length==0){
			alert("请选择要删除的记录");
			return;
		}
		$.ajax({
			url:'${ctp}/system/user/del_user.json',
			type:'post',
			dataType:'json',
			data:{'ids':ids},
			success:function(result){
				if(result.success){
					window.location.reload();
				}
			}
		})
	})

</script>
</html>